<template>
	<div id="list">
		<h1>本店美食</h1>
		<div class="ss">
			<h2>本店特色</h2>
			<ul class="tese">
				<li 
				v-for="(val) in G_LIST_TESE"
				:key='val.id'
				>
					<img :src="'http://localhost:8866'+val.url" alt="">
					<p>
						<i :index='val.id'>{{val.name}}</i>
						<b>￥{{val.price}}</b>
						<span class="jia" @click="addshop(val)"></span>
					</p>
				</li>
			</ul>
			<h2>烧烤系列</h2>
			<ul class="shaokao">
				<li
				v-for="(val) in G_LIST_SHAOKAO"
				:key='val.id'
				>
					<img :src="'http://localhost:8866'+val.url" alt="">
					<p>
						<i :index='val.id'>{{val.name}}</i>
						<b>￥{{val.price}}</b>
						<span class="jia" @click="addshop(val)"></span>
					</p>
				</li>
			</ul>
			<h2>主食系列</h2>
			<ul class="zhushi">
				<li
				v-for="(val) in G_LIST_ZHUSHI"
				:key='val.id'
				>
					<img :src="'http://localhost:8866'+val.url" alt="">
					<p>
						<i :index='val.id'>{{val.name}}</i>
						<b>￥{{val.price}}</b>
						<span class="jia" @click="addshop(val)"></span>
					</p>
				</li>
			</ul>
			<h2>甜品饮品</h2>
			<ul class="yinpin">
				<li
				v-for="(val) in G_LIST_YINPIN"
				:key='val.id'
				>
					<img :src="'http://localhost:8866'+val.url" alt="">
					<p>
						<i :index='val.id'>{{val.name}}</i>
						<b>￥{{val.price}}</b>
						<span class="jia" @click="addshop(val)"></span>
					</p>
				</li>
			</ul>
		</div>
		<div class="ele">
			<lift name='本店特色' idname='lift1' @click.native='tiao(174)'></lift>
			<lift name='烧烤系列' idname='lift2' @click.native='tiao(598)'></lift>
			<lift name='主食系列' idname='lift3' @click.native='tiao(1670)'></lift>
			<lift name='甜品饮品' idname='lift4' @click.native='tiao(2410)'></lift>
		</div>
		<div class="gou">
			<p>
				<span class="iconfont icon-gouwuchekong"></span>
			</p>
			<ul class="pin">
				<ul class="tab">
					<li
						v-for="(val) in G_LIST_SHOPCAR"
						:key='val.id'
					>
						<i class="dx">
							<input type="checkbox" checked="checked">
						</i>
						<i class="ming">{{val.name}}</i>
						<i class="danjia">{{val.price}}</i>
						<i class="jiajian">
							<span class="jianh" @click="jiajian(-1,val.name)">-</span>
							<span class="shu">{{val.num}}</span>
							<span class="jiah" @click="jiajian(1,val.name)">+</span>
						</i>
						<i class="xiaoji">{{val.price*val.num}}</i>
						<i class="shuanchu" @click="removeone(val.id)">
							<span class="iconfont icon-lajixiang"></span>
						</i>
					</li>
				</ul>
				<ul class="di">
					<li class="quanx">
						<input type="checkbox" checked="checked">
						全选
					</li>
					<li class="zongs">
						总数量<span>{{zongge}}份</span>	
					</li>
					<li class="zongj">
						总价格<span>{{zongjia}}元</span>
					</li>
					<li class="quans" @click="A_LIST_REMOVEALL">
						全部删除
					</li>
				</ul>
			</ul>
			<a href="javascript:;" class="jies">结算</a>
		</div>
	</div>
</template>

<script>
	import lift from '../components/lift.vue'
	import {mapGetters,mapState,mapActions} from 'vuex'
	export default {
		name:'List',
		props:{},
		data(){
		  return {
			  timer:null
		  }
		},
		components:{lift},
		mounted(){
			this.$store.dispatch('list/A_LIST_SETLIST')
		},
		updated(){
		},
		methods:{
			...mapActions('list',['A_LIST_REMOVEALL']),
			addshop(data){
				this.$store.dispatch('list/A_LIST_ADDSHOP',data)
			},
			jiajian(num,name){
				this.$store.dispatch('list/A_LIST_JIAJIAN',{num,name})
			},
			removeone(id){
				this.$store.dispatch('list/A_LIST_REMOVEONE',id)
			},
			tiao(mi){
				clearInterval(this.timer);
				this.timer=null
					if(document.documentElement.scrollTop<mi){
						this.timer=setInterval(()=>{
							document.documentElement.scrollTop+=10;
							if(document.documentElement.scrollTop>=mi){
								clearInterval(this.timer);
								this.timer=null
							}
						},1)
					}else if(document.documentElement.scrollTop>mi){
						this.timer=setInterval(()=>{
							document.documentElement.scrollTop-=10;
							if(document.documentElement.scrollTop<=mi){
								clearInterval(this.timer);
								this.timer=null
							}
						},1)
					}
			}
		},
		computed:{
			...mapGetters('list',['G_LIST_TESE','G_LIST_SHAOKAO','G_LIST_ZHUSHI','G_LIST_YINPIN','G_LIST_SHOPCAR']),
			zongge(){
				let num=0
				this.G_LIST_SHOPCAR.forEach(val=>{
					num+=val.num
				})
				return num
			},
			zongjia(){
				let num=0
				this.G_LIST_SHOPCAR.forEach(val=>{
					num+=(val.price*val.num)
				})
				return num
			}
		}
	}
</script>

<style scoped>
	#list{
		background-color: #000000;
	}
	.tnav ul li:nth-child(2) a:after{
		display: block;
	}
	.tnav ul li:nth-child(2){
		background: rgb(13, 13, 13);;
	}
	.tnav ul li:nth-child(2) a{
		color: rgb(13, 13, 13);;
	}
	.ss{
		margin:auto;
		width:1300px;
		background:rgb(33, 33, 33);
		border:4px solid #393939;
		box-shadow:inset 0 0 4px 4px #000;
	}
	.ss h2{
		width: 600px;
		background:#393939;
		text-align:right;
		padding:10px;
		font-weight: bold;
		font-size:24px;
		color:#fff
	}
	.ss ul{
		margin:20px;
		overflow: hidden;
	}
	.ss ul li{
		float: left;
		width:220px;
		height:300px;
		background:#FFF;
		margin:15px;
		position: relative;
		color:#fff;
	}
	.ss ul li img{
		width:220px;
		height:300px;
	}
	.ss ul li p::after{
		content: "";
		position: absolute;
		width:100%;
		height:3px;
		background: #C70C4E;
		left:0px;
		top:0px;
	}
	.ss ul li p{
		position: absolute;
		bottom:0;
		width:100%;
		text-align: center;
		height:40px;
		line-height: 40px;
		background:rgba(13, 13, 13, .8);
	
	}
	
	.jia{
		position: absolute;
		border-radius: 50%;
		width:20px;
		height:20px;
		font-weight: bold;
		font-size:20px;
		cursor: pointer;
		top:10px;
		margin-left: 10px;
		/* background-image: url("../images/jia.jpg"); */
		background-size: 100% 100%;
		transition: all .5s;
		background-color: #FF0000;
	}
	.jia:hover{
		transform: scale(1.2)
		
	}
	.ele{
		position: fixed;
		left:100px;
		top:140px;
		color:#fff;
	}
	.gou{
		width:100%;
		position:fixed;
		bottom:0px;
		height:50px;
		background:#333;
	}
	.gou>p{
		width:60px;
		height:60px;
		line-height: 60px;
		text-align: center;
		border-radius: 50%;
		margin-left:300px;
		position: absolute;
		bottom:0px;
		background: rgb(81, 212, 162);
	}
	.gou>p span{
		font-size:30px;
	}
	.gou>a{
		float: right;
		display: block;
		background: #F66567;
		height:40px;
		width:120px;
		font-size: 30px;
		margin-top: 5px;
		color:#fff;
		margin-right:450px;
	}
	.pin{
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:700px;
		height:40px;
		top:5px;
		background: #ffffff;;
	}
	.tab{
		user-select:none;
		position: absolute;
		bottom:40px;
		width:694px;
		left: 3px;
		max-height:260px;
		overflow-y: auto;
		transition: all .5s;
		background: rgb(249, 249, 249);
	}
	.tab li{
		height:50px;
		display: flex;
		justify-content: space-around;
		background: #fff;
		margin:5px 0px;
		color:#000;
	}
	.tab li i{
		line-height: 50px;
	}
	.ming{
		width:200px;
		color: #8C8C8C;
	}
	.jiajian{
		width:100px;
	}
	.jiajian span{
		padding:5px;
	}
	.jiah,.jianh{
		background:rgb(239, 239, 239);
		cursor: pointer;
	}
	.shu{
		display:inline-block;
		width:50px;
		text-align: center;
	}
	.danjia{
		width:50px;
	}
	.xiaoji{
		width: 70px;
		color:#E02B41;
		font-size:20px;
		font-weight: bold;
	}
	.dx input{
		width:20px;
		height:20px;
		cursor: pointer;
	}
	.shanchu span{
		cursor: pointer;
	}
	.zongj span,.zongs span{
		color:yellow;
		font-size: 20px;
	}
	.di .zongj{
		width: 150px;
	}
	.di{
		height:100%;
		color:#fff;
		background: rgb(0, 0, 0,.5);
		border:3px solid #fff;
		border-top:0px;
	}
	.di li{
		float: left;
		margin-top:10px;
		margin-left:50px;
		width:110px;
		text-align: left;
	}
	.quans{
		font-size: 20px;
		cursor: pointer;
	}
	.quanx{
		cursor: pointer;
	}
	.jies{
		text-align: center;
	}
	.erweima{
		width: 600px;
		height:700px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		/* background:url("../images/er.jpg") no-repeat; */
		background-size: 80% 80%;
		z-index: 999;
		background-position: center center;
		background-color: #f2f2f2;
	}
	.erweima p{
		position: absolute;
		bottom: 40px;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #000;
		font-size: 18px;
	}
	.erweima span{
		position: absolute;
		right:0px;
		top:0px;
		font-size: 30px;
		background-color: rgb(126, 62, 62);
		cursor: pointer;
	}
</style>
